

<template>
  <div class="box">
    <div id="container"></div>
  </div>
</template>

<script>
  import Charts from '@jiaminghi/charts'
  export default {
    data() {
      return {
        option: {
          legend: {
            data: [
              {
                name: '温度变化',
                color: '#37a2da'
              }
            ],
            textStyle: {
              fontFamily: 'Arial',
              fontSize: 13,
              fill: '#000'
            }
          },
          //用来配置x坐标轴
          xAxis: {
            data: [
              '10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07'
            ],
            axisLine: {
              style: {
                stroke: '#333',
                lineWidth: 1
              }
            },
            axisLabel: {
              style: {
                fill: '#333',
                fontSize: 10,
                rotate: 0
              }
            },
            //是否显示刻度线
            axisTick: {
              show: true
            }
          },
          //用来配置y坐标轴
          yAxis: {
            data: 'value',
            //坐标轴分割线配置,是否显示
            splitLine: {
              show: true
            },
            axisLine: {
              style: {
                stroke: '#333',
                lineWidth: 1
              }
            },
            axisLabel: {
              style: {
                stroke: '#333',
                lineWidth: 1
              }
            },
            //是否显示刻度线
            axisTick: {
              show: true
            },
            min: 36,
            max: 40
          },
          series: [
            {
              data: [
                36.3, 36.7, 37.8, 36.5, 36.7, 37.1, 36.9
              ],
              type: 'line',
              name: '温度变化',
              lineArea: {
                show: true,
                gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
              },
              lineStyle: {
                lineWidth: 1
              },
              linePoint: {
                radius: 4,
                style: {
                  fill: '#fff',
                  lineWidth: 1
                }
              }
            }
          ]
        }
      }
    },
    mounted() {
      this.charet();
    },
    methods: {
      charet() {
        const container = document.getElementById('container')
        const myChart = new Charts(container)
        myChart.setOption(this.option)
      }
    },
  }
</script>

<style>

  #container {
    width: 800px;
    height: 500px;
    background:#f1f1f1;
  }
</style>

